<template>
	<fill-height-scroll-view @scroll="getScroll">
		<template slot="element">
			<!-- 顶部导航 start -->
			<view class="f-x-bt bf p03">
				<scroll-view v-if="sarr.length" class='ws-n sarr pt10 bf' scroll-x='true'>
					<block v-for="(v,i) in sarr" :key='i'>
						<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c'
							:class="{wei:v.active}"
							:style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">
							{{v.name}}</view>
					</block>
				</scroll-view>
			</view>
			<!-- 顶部导航 end -->
			<view class="p3 bf mt20">
				<view class="w100 f-bt">
					<view class="title f32">整体看板</view>
					<view class="c6">查看详情></view>
				</view>
				<view class="cardList">
					<view class="card" v-for="(item,index) in totalList" :key="item.name">
						<text class="f26">{{item.name}}</text>
						<text class="f34 mt20 wei">{{item.num}}</text>
						<text v-if="item.rateName != ''" class="ca2 f24">{{item.rateName}}<text class="cfa">{{item.rate}}</text></text>
					</view>
				</view>
				<view class="qiun-charts mt30 cell">
					<qiun-data-charts canvasId="PayFacemix" :canvas2d="true"
						:opts="{xAxis:{labelCount:5},yAxis:{data:[{position:'left', title: '金额',fontColor: '#a2a2a2',axisLine: false,format:'yAxisDemo'},{position:'right', title: '单数',fontColor: '#a2a2a2',axisLine: false,format:'yAxisDemo'}]}}"
						:inScrollView="true" :pageScrollTop="pageScrollTop" type="mix" :chartData="LineData"
						:tooltipShow="false" background="#FFFFFF" @getIndex="getIndex" />
					<!-- tooltip start -->
					<view class="tooltip" v-if="showTooltip">
						<view>{{tooltopData.title}}</view>
						<view v-for="item in tooltopData.data" :key="item.name" class="f-s-c">
							<view :style="{background:item.color}"
								style="width: 26rpx;height: 26rpx;border-radius: 50%;margin-right: 10rpx;"></view>
							<text>{{item.name}}</text>
							<text>{{item.value}}</text>
						</view>
					</view>
					<!-- tooltip end-->
				</view>
			</view>
			<view class="bf p3 mt20">
				<view class="w100 f-bt">
					<view class="title f32">订单渠道</view>
				</view>
				<view class="charts-ring">
					<qiun-data-charts canvasId="PayFacering2" :canvas2d="true" :pageScrollTop="pageScrollTop" type="ring"
						:chartData="showData.channel" :opts="{title:{name: '订单数'},subtitle:{name:channelTotal || '0'}}"
						background="none" :tooltipShow="false" :tapLegend="false" />
				</view>
			</view>

			<view class="bf p3 mt20">
				<view class="w100 f-bt">
					<view class="title f32">支付占比</view>
				</view>
				<view class="charts-ring">
					<qiun-data-charts canvasId="PayFacering3" :canvas2d="true" :pageScrollTop="pageScrollTop" type="ring"
						:chartData="showData.payRate" :opts="{title:{name: '订单数'},subtitle:{name:payRateTotal  || '0'}}"
						background="none" :tooltipShow="false" :tapLegend="false" />
				</view>
			</view>
			<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
				range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
		</template>
	</fill-height-scroll-view>
</template>

<script>
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import uCharts from '@/yb_shd/dp/components/js_sdk/u-charts/u-charts.js'
	import qiunDataCharts from '@/yb_shd/dp/components/qiun-data-charts/qiun-data-charts.vue'
	import FillHeightScrollView from '@/yb_shd/dp/components/fill-height-scroll-view.vue'
	export default {
		components: {
			qiunDataCharts,
			FillHeightScrollView
		},
		mixins: [utilMixins],
		data() {
			return {
				showrl: false,
				channelTotal: 0,
				payRateTotal: 0,
				tooltopData: {},
				showDate: false,
				showTooltip: false,
				pageScrollTop: 0,
				query: {
					timeType: 1,
					startTime: '',
					endTime: ''
				},
				result: {},
				LineData: null, //图表对象数据
				totalList: [
					{name: '今日收款',num: '0',rateName: '有效订单：',rate: '0'}, {name: '预计收入',num: '0',rateName: '服务费支出：',rate: '0'},
					{name: '总收款',num: '0',rateName: '有效订单：',rate: '0'}, {name: '总支付人数',num: '0',rateName: '',rate: '0'},
				],
				sarr: [{name: '今日',active: true,type: 1}, {name: '近七日',active: false,type: 2},{name: '近十五日',active: false,type: 3}, {name: '具体时间',active: false,type: 4}],
				chartData: {
					inData: {
						channel: {series: [{data: [{name: '微信小程序',value: 0}, {name: '支付宝小程序',value: 0}]}]},
						payRate: {series: [{data: [{name: '微信支付订单',value: 50}, {name: '支付宝支付订单',value: 50}, {name: '余额支付订单',value: 50}]}]}
					}
				}
			}
		},
		computed: {
			showData() {
				return this.chartData.inData
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			changeDate(e) {
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.fetchData()
			},
			async fetchData() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.statisticFacePay,
						data: this.query
					})
					this.result = data
					this.totalList[0].num = data.money || 0
					this.totalList[0].rate = data.count

					this.totalList[1].num = data.storeActualMoney || 0
					this.totalList[1].rate = data.service

					this.totalList[2].num = data.sumMoney
					this.totalList[2].rate = data.sumCount

					this.totalList[3].num = data.payUserNum
					this.getChartData(data)
				} catch (e) {
					this.util.message(e.msg, 3)
				}
			},
			getIndex(e) {
				if (this.showTooltip) {
					return
				}
				var index = e.currentIndex.index
				if(index === -1){
					return
				}
				var tooltopData = {
					title: this.result.moneyChar[index].hours,
					data: [{
							color: e.opts.color[0],
							name: '支付金额：',
							value: this.result.moneyChar[index].money
						},
						{
							color: e.opts.color[1],
							name: '订单数：',
							value: this.result.countChar[index].money
						}
					]

				}
				this.tooltopData = tooltopData
				this.showTooltip = true
				setTimeout(() => {
					this.showTooltip = false
				}, 2000)
			},
			getScroll(e) {
				this.pageScrollTop = e.detail.scrollTop
			},
			getChartData(data) {
				var LineData = {
					categories: [],
					series: []
				};
				LineData.categories = data.moneyChar.map(element => {
					return element.hours.replace(/(\d{4})-/, '')
				})
				// 支付金额
				var totalMoney = data.moneyChar.map(element => {
					return element.money
				})
				// 订单数
				var order = data.countChar.map(element => {
					return element.money
				})
				LineData.series = [{
						name: "支付金额",
						"type": "line",
						"style": "curve",
						data: totalMoney,
						color: '#63b2ee',
						legendShape: 'square'
					},
					{
						name: "订单数",
						"type": "line",
						"style": "curve",
						data: order,
						color: '#76da91',
						legendShape: 'square'
					}
				]
				this.LineData = LineData
					this.channelTotal = (+this.result.wxCount) + (+this.result.aliCount)
					this.payRateTotal = (+this.result.wxMoney) + (+this.result.aliMoney) + (+this.result.balanceMoney)

					this.chartData.inData.channel.series[0].data[0].value = +this.result.wxCount
					this.chartData.inData.channel.series[0].data[1].value = +this.result.aliCount

					this.chartData.inData.payRate.series[0].data[0].value = +this.result.wxMoney
					this.chartData.inData.payRate.series[0].data[1].value = +this.result.aliMoney
					this.chartData.inData.payRate.series[0].data[2].value = +this.result.balanceMoney

			},
			clickSarr(index) {
				this.sarr.forEach((item, i) => {
					if (i === index) {
						item.active = true
						this.query.timeType = item.type
						if(this.query.timeType != 4){
							this.fetchData()
						}else{
							//具体时间
							this.showrl = true
						}
					} else {
						item.active = false
					}
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.title {
		position: relative;
		margin-left: 20rpx;
		font-weight: bold;
		color: #000;
	}

	.title::after {
		content: "";
		position: absolute;
		width: 10rpx;
		height: 20rpx;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		background: #FE9367;
	}

	.cardList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		font-size: 30rpx;

		.card {
			display: flex;
			flex-direction: column;
			width: 48%;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}

		.card-inactive {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FFFFFF;
			border: 1px solid #ccc;
			margin-top: 20rpx;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
		}

		.card-active {
			display: flex;
			flex-direction: column;
			width: 220rpx;
			height: 160rpx;
			background: #FEFAED;
			margin-top: 20rpx;
			border: 1px solid #E3BD76;
			border-radius: 10rpx;
			justify-content: center;
			padding: 20rpx;
			font-weight: bold;
		}
	}

	.analysis {
		display: flex;
		flex-direction: column;
		width: 220rpx;
		height: 160rpx;
		margin-top: 20rpx;
		justify-content: center;
	}

	.qiun-charts {
		width: 730rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-left: -40rpx;
	}

	.charts-ring {
		margin: 0 auto;
		width: 600rpx;
		height: 350rpx;
		background-color: #FFFFFF;
	}

	.tooltip {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		width: 400rpx;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, .9);
		color: #FFFFFF;
	}
</style>
